<template>
	<NavBar :obj="{ title: '我的消息', color: '#000', backgroundColor: '#fff' }" />
	<up-sticky :offset-top="offsetTop">
		<view class="tabs">
			<up-tabs
				:list="type"
				@change="typeCah"
				:scrollable="false"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:lineColor="theme?.themeColor"
			></up-tabs>
		</view>
	</up-sticky>

	<view class="container">
		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>

		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="title">{{ item.title }}</view>
			<view class="desc">{{ item.content }}</view>
			<view class="time">{{ item.create_time }}</view>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392upx" marginTop="50%" text="暂无消息" />
		</view>
	</view>
</template>

<script setup>
	import { ref, inject } from 'vue';
	import { port, goUrl, hint } from '/service/port';
	import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();
	
	const offsetTop = ref(0);
	const list = ref([]);
	const type = ref([]);
	const showLoad = ref(true);
	const pageRef = ref({
		type_id: 1,
		page: 1
	});
	const typeCah = (e) => {
		list.value.length = 0;
		pageRef.value.type_id = e.val;
		pageRef.value.page = 1;
		showLoad.value = true;
		getNotify();
	};

	async function getNotify() {
		let res = await port('getNotify', pageRef.value);
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			pageRef.value.page++;
		}
	}

	async function getNotifyTypeList() {
		let res = await port('getNotifyTypeList');
		let ty = [];
		res.data.list.map((v) => {
			
			ty.push({
				name: v.title,
				val: v.id,
				badge: { isDot: v.count > 0 }
			});
		});
		
		type.value = ty;
	
		getNotify();
	}

	onShow(() => {
		pageRef.value.page = 1;
		list.value.length = 0;
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		getNotifyTypeList();
		
	});

	onReachBottom(() => {
		getNotify();
	});
</script>

<style scoped lang="scss">
	.tabs {
		background-color: #fff;
	}

	.container {
		position: relative;
		margin: 0 30rpx;

		.item {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 30rpx;
			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
			.desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #444444;
				padding: 25rpx 0;
			}
			.time {
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
</style>
